<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- 	<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<image src="/static/back.png" mode="aspectFit"></image>
				</view>
				<text class="title">导航</text>
			</view>
		</view> -->

		<!-- 地图 -->
		<view class="map-wrapper">
			<map id="myMap" style="width: 100%; height: 1000rpx;" :latitude="latitude" :longitude="longitude"
				:markers="markers" :show-location="true" :scale="16" @markertap="onMarkerTap"
				@regionchange="onRegionChange"></map>
		</view>

		<!-- 店铺信息 -->
		<view class="store-info">
			<view class="store-name">车百事汽车生活馆</view>
			<view class="store-address">山阳区人民路与解放路交叉口</view>
			<button class="nav-btn" @click="openLocation">开始导航</button>
			<button class="locate-btn" @click="locateToCurrent">定位到当前位置</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				latitude: 34.787,
				longitude: 113.689,
				currentLatitude: 0,
				currentLongitude: 0,
				markers: [{
					id: 1,
					latitude: 34.787,
					longitude: 113.689,
					title: "车百事汽车生活馆",
					iconPath: "/static/location.png",
					width: 30,
					height: 30
				}],
				mapContext: null
			};
		},
		onLoad() {
			// 获取系统信息，计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;

			// 获取当前位置
			this.getCurrentLocation();
		},
		onReady() {
			// 初始化地图上下文
			this.mapContext = uni.createMapContext('myMap', this);
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 获取当前位置
			getCurrentLocation() {
				uni.getLocation({
					type: 'gcj02',
					altitude: false,
					success: (res) => {
						this.currentLatitude = res.latitude;
						this.currentLongitude = res.longitude;

						// 添加当前位置标记
						this.markers.unshift({
							id: 0,
							latitude: res.latitude,
							longitude: res.longitude,
							title: "我的位置",
							iconPath: "/static/current-location.png",
							width: 30,
							height: 30
						});
					},
					fail: (err) => {
						console.log('获取位置失败', err);
						uni.showToast({
							title: '无法获取位置，请检查权限',
							icon: 'none'
						});
					}
				});
			},
			// 定位到当前位置
			locateToCurrent() {
				if (this.currentLatitude && this.currentLongitude) {
					this.latitude = this.currentLatitude;
					this.longitude = this.currentLongitude;

					// 带动画效果移动到当前位置
					this.mapContext.moveToLocation({
						latitude: this.currentLatitude,
						longitude: this.currentLongitude
					});
				} else {
					uni.showToast({
						title: '正在获取位置...',
						icon: 'none'
					});
				}
			},
			// 打开导航
			openLocation() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: "车百事汽车生活馆",
					address: "山阳区人民路与解放路交叉口",
					scale: 18,
					success: () => {
						console.log('导航成功打开');
					},
					fail: (err) => {
						console.log('打开导航失败', err);
						uni.showToast({
							title: '无法打开地图应用',
							icon: 'none'
						});
					}
				});
			},
			// 点击标记点
			onMarkerTap(e) {
				console.log('点击了标记点', e.markerId);
				const marker = this.markers.find(m => m.id === e.markerId);
				if (marker) {
					uni.showToast({
						title: marker.title,
						icon: 'none'
					});
				}
			},
			// 地图视野变化
			onRegionChange(e) {
				if (e.type === 'end') {
					this.mapContext.getCenterLocation({
						success: (res) => {
							console.log('当前地图中心位置', res.latitude, res.longitude);
						}
					});
				}
			}
		}
	};
</script>

<style>
	.container {
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		color: #fff;
		box-sizing: border-box;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		border-bottom-left-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		gap: 16rpx;
	}

	.back-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		transition: transform 0.15s ease, background 0.2s ease;
	}

	.back-icon:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.28);
	}

	.back-icon image {
		width: 40rpx;
		height: 40rpx;
		filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		color: #fff;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	/* 地图 */
	.map-wrapper {
		margin: 24rpx 20rpx 12rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 24rpx rgba(41, 96, 164, 0.18);
		border: 1rpx solid rgba(42, 140, 255, 0.15);
		height: 1000rpx;
	}

	/* 店铺信息 */
	.store-info {
		background: #ffffff;
		margin: 12rpx 20rpx 24rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.store-name {
		font-size: 34rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.store-address {
		font-size: 26rpx;
		color: #6b7a90;
		line-height: 1.6;
		flex: 1;
	}

	.nav-btn,
	.locate-btn {
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 38rpx;
		font-size: 28rpx;
		font-weight: 600;
		border: none;
		transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	}

	.nav-btn {
		background: linear-gradient(90deg, #2a8cff 0%, #1c6bff 100%);
		color: #ffffff;
		box-shadow: 0 10rpx 20rpx rgba(42, 140, 255, 0.28);
	}

	.locate-btn {
		background: #f5f7fa;
		color: #4e5969;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.nav-btn:active,
	.locate-btn:active {
		transform: translateY(2rpx) scale(0.98);
		opacity: 0.96;
	}

	.nav-btn:active {
		box-shadow: 0 6rpx 12rpx rgba(42, 140, 255, 0.26);
	}

	.locate-btn:active {
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}
</style>